// 这是头像下面的几个县列表根据数据库返回的县的数量能获取不同数量的列表用ant-mobile
import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { getCounty } from '../../redux/actionCreator'
import './choise.css'
import {imgInter} from '../../data/Interface'

class Choise extends React.Component {
  constructor(props) {
    super(props)
    this.props.dispatch(getCounty());
  }
  render() {
    // console.log(this.props);
    // let busList = [this.props.county[0], this.props.county[3], this.props.county[4]];
    // console.log(busList);
    // console.log(typeof (busList));
    return (
      <div className='choice' style={{ paddingTop: '85px', paddingBottom: '20px' }}>
        <div style={{ fontSize: '1.5em', fontWeight: 'bold' }}>地点攻略</div>
        {/* 三个代表地区的横排li */}

        <ul style={{ margin: '0 auto', width: '100%' }}>
          {this.props.county.map((item, index) => {
            // console.log(item)

            return (
              <li key={item.county_id} onClick={() => {
                this.props.history.push({
                  pathname: '/countydetail',
                  search: `county_id=${item.county_id}`
                })
                localStorage.setItem('countyDetail', JSON.stringify(item))
              }}>
                {/* {item.county_id} */}
                <img src={`${imgInter}${item.county_pic}`}></img>
                <div className="choise-word">{item.county_name}</div>

              </li>
            )
          })}
          {/* <li>

            <img src={`http://www.h5weixin.club:1025/api/image/luancheng_pic.png`}></img>
            <div className="choise-word">栾城</div>

          </li>

          <li>
            <img></img>
            <div className="choise-word"></div>
          </li>

          <li>
            <img></img>
            <div className="choise-word"></div>
          </li> */}

        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  county: state.county
})

export default withRouter(connect(mapStateToProps)(Choise))
